<template>
  <view class="ver-layout">
    <view class="card-view ver-layout">
      <view class="hor-layout-side-base-line card-title">
        <view class="hor-layout-base-line">
          <ali-icon size="25" font="icon-tongzhi"></ali-icon>
          <view style="font-weight: bold">Notifications</view>
        </view>
        <view class="hor-layout-center" @click="toPage">
          <view style="font-size: small">READ MORE</view>
          <u-icon size="20" name="arrow-right" color="#999999"></u-icon>
        </view>
      </view>
      <view class="card-divider"></view>
      <view class="card-item hor-layout-side-center">
        <view class="ver-layout">
          <view class="card-content-title">vip</view>
          <view class="card-content-text">You have become a VIP2</view>
        </view>
      </view>
      <view class="card-divider"></view>
      <view class="card-item ver-layout">
        <view class="card-content-title">HOT VISA😘</view>
        <view class="card-content-text">$100*1 = ₦47,000</view>
        <view class="card-content-text">$200*1 = ₦96,000</view>
        <view class="card-content-text">$500*1 = ₦250,000</view>
        <view class="card-content-text">Digits Limit: 4034/4912/4852/4786/511332</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-item ver-layout">
        <view class="card-content-title">Nice rate!😍</view>
        <view class="card-content-text">Visa $500*1=₦250,000 for</view>
        <view class="card-content-text">(4034/4912/4852/4786/511332)</view>
        <view class="card-content-text">Vanilla CA$100= ₦34,000</view>
        <view class="card-content-text">Note: first four digits limit</view>
      </view>
    </view>
  </view>
</template>

<script>
import {messageList} from "router"

export default {
  name: "notice",
  methods: {
    toPage() {
      this.$tools.pageGo(messageList)
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background: #f7f7f7;
  padding: 10px;
}

.card-view {
  padding: 7px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 0 3px #d9d9d9;

  .card-title {
    margin-top: 5px;
  }
}

.card-divider {
  width: 100%;
  margin: 10px 0px;
  height: 1px;
  background: #d9d9d9;
}

.card-item {
  margin: 0px 15px;

  .card-content-title {
    margin-bottom: 10px;
  }

  .card-content-text {
    font-size: small;
    margin-top: 2px;
  }
}
</style>
